<link href="__CDN__/assets/css/wx-audio.css" rel="stylesheet" type="text/css" />
<style>
    ul,
    ol {
        list-style: none;
    }

    em,
    i,
    var {
        font-style: normal;
    }

    ul > li {
        margin-bottom: 16px;
        margin-top: 26px;
    }

    ul > .robot {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    ul > .robot img,
    ul > .human img {
        width: 34px;
        height: 34px;
        border-radius: 17px;
        z-index: 9;
        cursor: pointer;
    }

    /* ul > .robot > div {
        padding: 12px 18px;
        border-radius: 0px 32px 32px 32px;
        margin-left: 12px;
        font-size: 14px;
        z-index: 9;
        background: rgba(53,114,187,1);
        color: #fff;
    } */

    ul > .human {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    ul > .human >img {
        margin-left: 12px;
    }
    ul > .robot >img {
        margin-right: 12px;
    }
    ul > .human >span {
        margin-right: 12px;
    }
    ul > .robot >span {
        margin-left: 12px;
    }
    ul > .human > div > p {
        margin:0px 0px 0px 10px;
    }
    /* ul > .human > div {
        padding: 12px 18px;
        border-radius: 32px 0px 32px 32px;
        font-size: 14px;
        background: rgba(255, 255, 255, 1);
        color: RGBA(51, 51, 51, 1);
        z-index: 9;
    } */


    ul > li > div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background:rgba(247,247,247,1);
        border-radius:10px;
        padding: 12px 18px;
        color: #585858;
    }
    ul > li > span {
        color: #9D9D9D;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 20px;
    }

    ul > li > div > p {
        display: inline-block;
        font-size: 12px;
        line-height: 20px;
    }

    .content {
        font-family: PingFangSC-Medium;
        background: #ebebeb;
    }

    body.is-dialog {
        background: #ebebeb;
    }
    .audio-detail{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .audio-detail .textaudio{
        margin-right: 20px;
    }
</style>
    <script src="__CDN__/assets/js/wx-audio.js"></script>
<div class="audio-detail">
    <div class="textaudio"></div>
</div>
<ul class="qa-text"></ul>
<span class="file-ad" style="display: none;">{$file}</span>
<span class="job_id" style="display: none;">{$job_id}</span>


<div class="hide layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8" style="text-align: center;">
        <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}
        </button>
    </div>
</div>
